<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>12354山卡拉火车-指导手册</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}"  media="all">
    <!--    导入bootstrap.js之前要先导入依赖的jquery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>
</head>
<body>
<hr>
<div class="container">

    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active type-button" data-type="ticket"><a href="javascript:void(0)"  >关于购票</a></li>
                <li role="presentation" class="type-button" data-type="refund"><a href="javascript:void(0)"  >关于改签</a></li>
                <li role="presentation" class="type-button" data-type="service"><a href="javascript:void(0)" >关于该网服务</a></li>
            </ul>
        </div>
    </div>
    <div th:insert="components/public/info :: ticket-info" id="info_div"></div>
    <script>
        $(".type-button").each(function () {
            $(this).click(function (event) {
                if($(this).hasClass('active'))
                    return;

                let type = $(this).data('type');
                let buttons = $('.type-button');
                for(let i = 0; i<3;i++){
                    //移除激活状态
                    $(buttons[i]).removeClass('active');
                }
                $(this).addClass('active');//当前按钮激活状态
                $('#info_div').load('/guide/'+type);
            })
        })
    </script>
</div>
</body>
</html>